<template>
<div>
    <el-carousel indicator-position="outside" >
    <el-carousel-item v-for="item in img" :key="item.id">
      <!--      <img :src="item.view" style="width:auto;height: 300px;" class="image"/>-->
      <el-image
        style="width:100%;height: 300px;"
        :src="item.view"
        fit="contain">
      </el-image>
    </el-carousel-item>
  </el-carousel>

    <el-row>
      <el-col :span="12">
        <highcharts id="high" class="high" :options="option"  ></highcharts>
      </el-col>
      <el-col :span="12">
        <highcharts id="high2" class="high2" :options="option2"></highcharts>
      </el-col>
    </el-row>
</div>
</template>

<script>
  import { Chart } from "highcharts-vue";
    export default {
        name: "Summary",
      components:{
        highcharts: Chart,
      },
      data() {
        return {
            img: [
              {id:0,view:require("../../assets/1.jpg")},
              {id:1,view:require("../../assets/2.jpg")},
              {id:2,view:require("../../assets/3.jpg")}
            ],
          option:{chart: {
              type: 'column'
            },
            title: {
              text: '月平均降雨量'
            },
            subtitle: {
              text: '数据来源: WorldClimate.com'
            },
            xAxis: {
              categories: [
                '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
              ],
              crosshair: true
            },
            yAxis: {
              min: 0,
              title: {
                text: '降雨量 (mm)'
              }
            },
            tooltip: {
              // head + 每个 point + footer 拼接成完整的 table
              headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
            },
            plotOptions: {
              column: {
                borderWidth: 0
              }
            },
            series: [{
              name: '东京',
              data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }, {
              name: '纽约',
              data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
            }, {
              name: '伦敦',
              data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
            }, {
              name: '柏林',
              data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
            }]},
          option2:{
            chart: {
              type: 'bar'
            },
            title: {
              text: '各洲不同时间的人口条形图'
            },
            subtitle: {
              text: '数据来源: Wikipedia.org'
            },
            xAxis: {
              categories: ['非洲', '美洲', '亚洲', '欧洲', '大洋洲'],
              title: {
                text: null
              }
            },
            yAxis: {
              min: 0,
              title: {
                text: '人口总量 (百万)',
                align: 'high'
              },
              labels: {
                overflow: 'justify'
              }
            },
            tooltip: {
              valueSuffix: ' 百万'
            },
            plotOptions: {
              bar: {
                dataLabels: {
                  enabled: true,
                  allowOverlap: true // 允许数据标签重叠
                }
              }
            },
            legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -40,
              y: 100,
              floating: true,
              borderWidth: 1,
              // backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
              shadow: true
            },
            series: [{
              name: '1800 年',
              data: [107, 31, 635, 203, 2]
            }, {
              name: '1900 年',
              data: [133, 156, 947, 408, 6]
            }, {
              name: '2008 年',
              data: [973, 914, 4054, 732, 34]
            }]
          },
        }
      }
    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
